import { Component, OnInit } from '@angular/core';
import { EChartOption} from 'echarts';
import {HttpService} from "../http.service";
import {Student} from "../student";

@Component({
  selector: 'app-hometowm',
  templateUrl: './hometowm.component.html',
  styleUrls: ['./hometowm.component.css']
})
export class HometowmComponent implements OnInit {
  loading = true;
  regionData = [
    {value: 0, name: '东北地区',itemStyle:{color:'#77A8B9'}},
    {value: 0, name: '华北地区',itemStyle:{color: '#BC8F8F'}},
    {value: 0, name: '西北地区',itemStyle:{color: '#8FBC8F'}},
    {value: 0, name:'西南地区',itemStyle:{color: '#B0E0E6'}},
    {value: 0, name: '中南地区',itemStyle:{color: '#D8BFD8'}},
    {value: 0, name: '华东地区',itemStyle:{color: '#D3D3D3'}}
  ];
  provinceList = ['辽宁省','吉林省','黑龙江','内蒙古自治区',
    '北京市','天津市','河北省','山西省',
    '陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区',
    '四川省','贵州省','云南省','重庆市','西藏区',
    '河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','香港特别行政区','澳门特别行政区',
    '上海市','江苏省','浙江省','安徽省','福建省','江西省','山东省','台湾省'];
  provinceData = [
    {value: 0, name: '辽宁省',itemStyle:{color: '#B0E0E6'}}, {value: 0, name: '吉林省'}, {value: 0, name: '黑龙江'}, {value: 0, name: '内蒙古自治区'},
    {value: 0, name: '北京市'}, {value: 0, name: '天津市'}, {value: 0, name: '河北省'}, {value: 0, name: '山西省'},
    {value: 0, name: '陕西省'}, {value: 0, name: '甘肃省'}, {value: 0, name: '青海省'}, {value: 0, name: '宁夏回族自治区'}, {value: 0, name: '新疆维吾尔自治区'},
    {value: 0, name: '四川省'}, {value: 0, name: '贵州省'}, {value: 0, name: '云南省'}, {value: 0, name: '重庆市'}, {value: 0, name: '西藏区'},
    {value: 0, name: '河南省'}, {value: 0, name: '湖北省'}, {value: 0, name: '湖南省'}, {value: 0, name: '广东省'}, {value: 0, name: '广西壮族自治区'}, {value: 0, name: '海南省'}, {value: 0, name: '香港特别行政区'}, {value: 0, name: '澳门特别行政区'},
    {value: 0, name: '上海市'}, {value: 0, name: '江苏省'}, {value: 0, name: '浙江省'}, {value: 0, name: '安徽省'}, {value: 0, name: '福建省'}, {value: 0, name: '江西省'}, {value: 0, name: '山东省'}, {value: 0, name: '台湾省'},
  ];
  option : EChartOption = {};
  constructor(private http: HttpService,) { }
  getProvinceData(studentList){
    for (const i in studentList){
      for (const j in this.provinceList){
        if( studentList[i].native_place === this.provinceList[j]){
          this.provinceData[j].value += 1;
        }
      }
    }
    console.log(this.provinceData);
    this.regionData[0].value = this.provinceData[0].value + this.provinceData[1].value + this.provinceData[2].value + this.provinceData[3].value;
    this.regionData[1].value = this.provinceData[4].value + this.provinceData[5].value + this.provinceData[6].value + this.provinceData[7].value;
    this.regionData[2].value = this.provinceData[8].value + this.provinceData[9].value + this.provinceData[10].value + this.provinceData[11].value + this.provinceData[12].value;
    this.regionData[3].value = this.provinceData[13].value + this.provinceData[14].value + this.provinceData[15].value + this.provinceData[16].value + this.provinceData[17].value;
    this.regionData[4].value = this.provinceData[18].value + this.provinceData[19].value + this.provinceData[20].value + this.provinceData[21].value + this.provinceData[22].value + this.provinceData[23].value + this.provinceData[24].value + this.provinceData[25].value;
    this.regionData[5].value = this.provinceData[26].value + this.provinceData[27].value + this.provinceData[28].value + this.provinceData[29].value + this.provinceData[30].value + this.provinceData[31].value + this.provinceData[32].value + this.provinceData[33].value;
    this.option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      title: {
        text : '籍贯分布图',
        left : 'center',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: '30',
        data: this.provinceList
      },
      series: [
        {
          name: '地区',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '48%'],

          label: {
            position: 'inner'
          },
          labelLine: {
            show: false
          },
          data: this.regionData,
          top: '20',
          left: '400'
        },
        {
          name: '省份',
          type: 'pie',
          radius: ['65%', '90%'],
          label: {
            show: false
          },
          data: this.provinceData,
          top: '20',
          left: '400'
        }
      ]
    };
    this.loading = false;
  }

  students: Student[] = [];
  getStudents(): void {
    this.http.getStudents().subscribe(
      (res) => {
        res.data.forEach(row => {
          this.students = [...this.students];
          this.students.push( {
              native_place: row.native_place,
              time_of_enrollment: row.time_of_enrollment,
              birthday : row.birthday,
              class : row.class,
              major : row.major,
              name : row.name,
              sex : row.sex,
              stuid : row.stuid
            });
        });
        this.getProvinceData(this.students);
        console.log(this.students);
      });
  }
  ngOnInit(): void {
    this.getStudents();
  }

}
